<template>
	<div class="result" v-show="false">
		<el-row>
			<el-col :span="24" class="result-con">
				<el-col :span="12">
					<p class="result-title">报销费用查询</p>
					<p class="daochu">
						<span>{{queryData.payDate?queryData.payDate.join('  -  '):'全部'}}</span>
						<el-dropdown trigger="click" @command="handleCommand">
							<span class="el-dropdown-link">
                            <i class="iconfont icon-daochu"></i>导出
                       </span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="a">导出excel</el-dropdown-item>
								<!--<el-dropdown-item command="b">导出PDF</el-dropdown-item>-->
							</el-dropdown-menu>
						</el-dropdown>
					</p>
				</el-col>
				<el-col :span="12" class="right">
					<div class="number" v-for="item in countList">
						<div class="number-item">
							<div class="number-total">{{item.amount}}</div>
							<div>[元]</div>
						</div>
						<p>{{item.name}},共{{item.count}}笔</p>
					</div>
				</el-col>
			</el-col>

			<el-col :span="24" class="my-table">
				<el-table class="table" height="490" :data="tableData" style="width: 100%;text-align: center;">
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form label-position="left" inline class="zhcx-table-expand">
								<el-form-item label="报销人">
									<span>{{ props.row.reimbursementPerson }}</span>
								</el-form-item>
								<el-form-item label="经办人">
									<span>{{ props.row.operator }}</span>
								</el-form-item>
								<el-form-item label="报销金额(元)">
									<span>{{ props.row.reimbursementCost }}</span>
								</el-form-item>
								<el-form-item label="报销类型">
									<span>{{$dicCache.getNameByMarkAndVal('REIMBURSEMENTTYPE', props.row.reimbursementType)}}</span>
								</el-form-item>
								<el-form-item label="费用用途">
									<span>{{ props.row.reimbursementPurpose }}</span>
								</el-form-item>
								<el-form-item label="报销时间">
									<span>{{ props.row.reimbursementDate }}</span>
								</el-form-item>
								<el-form-item label="审批状态">
									<span>{{['未提交','待审批','通过','不通过'][props.row.approvalStatus]}}</span>
								</el-form-item>
							</el-form>
							<layerPhoto :filesIds="props.row.filesId"></layerPhoto>
						</template>
					</el-table-column>

					<el-table-column prop="reimbursementPerson" label="报销人">
					</el-table-column>
					<el-table-column prop="operator" label="经办人">
					</el-table-column>
					<el-table-column prop="reimbursementCost" label="报销金额(元)">
					</el-table-column>
					<el-table-column prop="reimbursementType" label="报销类型">
						<template slot-scope="scope">
							{{$dicCache.getNameByMarkAndVal('REIMBURSEMENTTYPE', scope.row.reimbursementType)}}
						</template>
					</el-table-column>
					<el-table-column prop="reimbursementPurpose" label="费用用途">
					</el-table-column>
					<el-table-column prop="reimbursementDate" label="报销时间">
					</el-table-column>
					<el-table-column prop="approvalStatus" label="审批状态">
						<template slot-scope="scope">
							{{['未提交','待审批','通过','不通过'][scope.row.approvalStatus]}}
						</template>
					</el-table-column>
					<el-table-column prop="deleteFlag" label="状态">
						<template slot-scope="scope">
							{{['正常','已作废','作废中'][scope.row.deleteFlag]}}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="122">
						<template slot-scope="scope" v-if="scope.row.deleteFlag == '0'">
							<el-button class="option-btn" size="mini" @click="handleDelete(scope.$index, scope.row)">作废</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="24" class="my-pagination">
				<el-pagination background layout="total, prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="handleCurrentChange">
				</el-pagination>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import layerPhoto from "@/components/layer-photo";
	import Compute from "@/assets/compute.holdtime";
	export default {
		name: "",
		props: {
			value: {
				type: Boolean,
				default: false
			},
			queryData: {
				type: Object
			}
		},
		components: {
			layerPhoto
		},
		data() {
			return {
				total: 1, //分页数据总条数
				currentPage: 1,
				pageSize: 8,
				tableData: [],
				countData: {},
				visible: this.value,
				layIndex: null
			};
		},
		computed: {
			countList() {
				let res = [{
					amount: 0,
					name: '正常记录',
					count: 0
				}, {
					amount: 0,
					name: '作废记录',
					count: 0
				}];
				if(this.countData.list && this.countData.list.length > 0) {
					this.countData.list.forEach(e => {
						if(e.name.indexOf('正常') != -1) {
							res[0] = $.extend(res[0], {
								amount: Compute.plus(res[0].amount, e.amount),
								count: Compute.plus(res[0].count, e.count)
							});
						}
						if(e.name.indexOf('作废') != -1) {
							res[1] = $.extend(res[1], {
								amount: Compute.plus(res[1].amount, e.amount),
								count: Compute.plus(res[1].count, e.count)
							});
						}
					});
				}
				return res.reverse();
			}
		},
		methods: {
			loadData() {
				this.$http.post('reimbursement/getReimbursementInfo', $.extend({
						currentPage: this.currentPage,
						pageSize: this.pageSize,
						startTime: this.queryData.payDate[0],
						endTime: this.queryData.payDate[1],
						_method: "PATCH"
					},
					this.queryData
				), d => {
					if(d.status == '1') {
						this.tableData = d.rows;
						this.total = d.total;
						this.countData = d.data.countData;
					} else {
						this.tableData = [];
						this.total = 0;
						this.countData = {};
					}
				});
			},
			close() {
				this.visible = false;
				this.$emit('input', false);
			},
			// 切页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.loadData();
			},
			handleDelete(index, row) {
				let that = this;
				layer.confirm('确认作废？<br><font color="red">注意：此操作不可逆！</font>', {
					icon: 3,
					title: '提示'
				}, function(index) {
					that.$http.post('reimbursement/delReimbursementInfo/' + row.bh, {
						_method: 'DELETE'
					}, function(d) {
						if(d.status == '1') {
							layer.close(index);
							that.loadData();
							layer.msg(d.msg);
						} else {
							layer.msg(d.msg, {
								shift: 6
							});
						}
					});
				});
			},
			handleCommand(command) {
				if (command == "a") {
					this.$http.post('iem/zhcxExportXls', $.extend({
						searchType: '7',
						startTime: this.queryData.payDate[0],
						endTime: this.queryData.payDate[1]
					},
					this.queryData
				), d=>{
						if (d.status == '1') {
							$(document.body).append("<iframe height='0' width='0' frameborder='0'  src=" + d.data.url + "></iframe>")  
						}else {
							layer.msg(d.msg, {shift: 6});
						}
					});
				}
				if (command == "b") {
					
				}
			}
		},
		watch: {
			value(val) {
				this.visible = val;
			},
			visible(val) {
				if(val === false) {
					layer.close(this.layIndex);
				} else {
					this.loadData();
					this.$nextTick(() => {
						let that = this;
						this.layIndex = layer.open({
							type: 1,
							shadeClose: true,
							title: "",
							skin: "layui-layer-rim", //加上边框
							area: "85%", //宽高
							content: $(this.$el),
							end: function() {
								that.close();
							}
						});
					});
				}
			}
		}
	};
</script>

<style scoped>
	.my-table {
		margin-top: 14px;
	}
	
	.tabel .el-table {
		background: #f9f9f9;
	}
	/* .record {
		width: 33.33333333%;
		position: absolute;
		left: 0;
		text-align: center;
		bottom: -24px;
	}
	
	.record2 {
		width: 33.33333333%;
		position: absolute;
		left: 33.33333333%;
		text-align: center;
		bottom: -24px;
	}
	
	.record3 {
		width: 33.33333333%;
		position: absolute;
		left: 66.66666666%;
		text-align: center;
		bottom: -24px;
	} */
	
	.result {
		height: 100%;
		background: #f9f9f9;
	}
	
	.result-con {
		padding: 30px 0;
		box-shadow: 1px 1px 3px 1px #cac4c4;
	}
	
	.result-title {
		width: 70%;
		font-size: 24px;
		color: #575757;
		text-align: center;
	}
	
	.daochu {
		width: 80%;
		text-align: center;
		padding: 20px 0;
	}
	
	.change {
		width: 70%;
		color: #ff8124;
		text-align: center;
		cursor: pointer;
	}
	
	.daochu .el-dropdown {
		cursor: pointer;
		padding: 7px 20px;
		background: #fff;
		border-radius: 30px;
		box-shadow: 1px 1px 3px 1px #cac4c4;
		margin-left: 20px;
		color: #ff8124;
	}
	
	.daochu .el-dropdown-menu__item:hover {
		color: #ff8124 !important;
	}
	
	.icon-daochu {
		margin-right: 10px;
	}
	
	.right {
		/* display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative; */
	}
	
	.number {
		width: 80px;
		height: 80px;
		border: 3px solid #fe9a51;
		padding: 6px;
		border-radius: 100%;
		position: relative;
		float: right;
		margin-right: 40px;
	}
	
	.number p {
		position: absolute;
		width: 120%;
		text-align: center;
		float: left;
		left: -10%;
		bottom: -22px;
	}
	
	.number-item {
		width: 100%;
		height: 100%;
		border-radius: 100%;
		box-shadow: 0 0 3px #cfcbcb;
		color: #ff8124;
		text-align: center;
	}
	
	.number-total {
		width: 100%;
		float: left;
		font-size: 20px;
		margin-top: 20px;
		padding: 5px 0;
		font-family: fontNum3;
		font-weight: bold;
	}
</style>